<template>
  <div>
    <div class="term" @click="togglePicker">{{ term }}</div>
    <mt-picker
      v-if="isShowPicker"
      :visibleItemCount="visibleItemCount"
      :slots="slots"
      @change="onValuesChange">
    </mt-picker>
    <div class="gpa">学分绩点为：{{ gpa }}</div>
    <table class="tb">
      <tr>
        <th class="col1">课程名称</th>
        <th class="col2">学分</th>
        <th class="col3">成绩</th>
        <th class="col4">属性</th>
      </tr>
    </table>
    <div class="scrollTb" :style="scrollTb">
      <table class="tb">
        <tr v-for="(item, index) in showCourses" :key="index">
          <td class="col1">{{ item.courseName }}</td>
          <td class="col2">{{ item.credit }}</td>
          <td class="col3">{{ item.grade }}</td>
          <td class="col4">{{ item.type }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import fetch from '@/libs/fetch';

export default {
  methods: {
    onValuesChange(picker, values) {
      console.log(typeof this.$store.state.network.initState);
      this.term = values[0];
    },
    togglePicker(){
      this.isShowPicker = !this.isShowPicker;
    },
    fetchData(){
      fetch.post({
        url: '/getScore',
        success: (res) => {
          if(res.data.code === 0){
            this.courses = res.data.data;
          }
        },
        error: (e) => {
          console.log(e);
        }
      })
    }
  },
  mounted(){
    this.fetchData();
  },
  computed:{
    scrollTb(){
      let h = 40 + 45 + 30 + 46 + 40;
      if(this.isShowPicker){
        h += 110;
      }
      return {
        height: (window.innerHeight - h) + 'px'
      }
    },
    gpa(){
      let divisor = 0; // 除数
      let dividend = 0; // 被除数
      let i;
      let credit = 0;
      if(this.term === '没有成绩'){
        return 0;
      }
      for(i = 0; i < this.showCourses.length; i++){
        if(this.showCourses[i].type.indexOf('必修') > -1){
          credit = parseFloat(this.showCourses[i].credit);
          divisor += credit * 10;
          dividend += (parseFloat(this.showCourses[i].grade) - 50) * credit;
        }
      }
      let result = 0;
      if(divisor !== 0 && dividend !== 0){
        result = dividend / divisor;
      }
      return Math.round(result * 100) / 100;
    },
    showCourses(){
      let index = this.slots[0].values.indexOf(this.term);
      if(index === -1){
        return [];
      }
      return this.courses[index].data;
    }
  },
  watch: {
    courses: {
      handler(value,oldValue){
        for(let item of value){
          this.slots[0].values.push(item.name);
        }
        this.term = this.slots[0].values[0] || '没有成绩';
      },
      deep:true
    }
  },
  data() {
    return {
      isShowPicker: false,
      visibleItemCount: 3,
      term: '没有成绩',
      slots: [
        {
          values: [],
          className: 'slot1'
        }
      ],
      courses: []
    };
  }
};
</script>

<style scoped>
.term{
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}
.tb{
  width: 100%;
  text-align: center;
}
.tb tr{
  height: 40px;
}
.tb th,
.tb td{
  border-bottom: 1px solid #f4f4f4;
  border-right: 1px solid #f4f4f4;
  padding: 10px 5px;
}
.tb col1{
  width: 50%;
}
.tb .col2,
.tb .col3{
  width: 15%;
}
.tb .col4{
  width: 20%;
}
.scrollTb{
  overflow: auto;
}
.gpa{
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  background: #fff;
}
</style>
